////
/// @group card
////

@use "sass:map";
@use "../utils";
@use "../spacing";
@use "../border-radius";
@use "../theme/theme";
@use "../box-shadows";
@use "../typography/typography";
@use "../divider/divider";
@use "../interaction/interaction";

/// Set to `true` to disable all the styles
/// @type Boolean
$disable-everything: false !default;

/// Set to `true` to disable the bordered styles since cards use box-shadow by
/// default.
/// @type Boolean
$disable-bordered: false !default;

/// Set to `true` to disable the box-shadow styles if you want to rely on the
/// border styles instead.
/// @type Boolean
$disable-shadowed: false !default;

/// Set to `true` to disable the raisable card styles where hovering a card
/// increases the elevation/box-shadow.
///
/// @type Boolean
$disable-raisable: $disable-shadowed !default;

/// Set to `true` to disable the clickable card styles
/// @type Boolean
$disable-clickable: false !default;

/// Set to `true` to disable the styles for adding additional padding to the
/// last `CardContent` that exists
/// @type Boolean
$disable-content-last-child-padding: false !default;

/// The default card box-shadow elevation
/// @type Number
$elevation: 2 !default;

/// The default card raisable starting box-shadow elevation
/// @type Number
$raisable-start-elevation: 1 !default;

/// The default card raisable ending (hovering) box-shadow elevation
/// @type Number
$raisable-end-elevation: 8 !default;

/// The background color to use when using the global light theme
/// @type Color
$light-theme-background-color: theme.theme-get-var(surface-color) !default;

/// The background color to use when using the global dark theme
/// @type Color
$dark-theme-background-color: if(
  theme.$disable-dark-elevation,
  theme.$dark-theme-surface-color,
  map.get(theme.$dark-elevation-colors, $elevation)
) !default;

/// The default card background color
/// @type Color
$background-color: theme.get-default-color(
  $light-theme-background-color,
  $dark-theme-background-color
) !default;

/// The default card text color
/// @type Color
$color: theme.theme-get-var(text-primary-color) !default;

/// The default border-color for bordered cards
/// @type Color
$border-color: divider.get-var(color) !default;

/// The default border-width for bordered cards
/// @type Number
$border-width: divider.get-var(size) !default;

/// The default border-radius for bordered cards
/// @type Number
$border-radius: border-radius.get-var(xs) !default;

/// The default padding to apply to `CardHeader`
/// @type Number
$header-padding: spacing.get-var(md) !default;

/// The default padding-top to apply to `CardHeader`
/// @type Number
$header-padding-top: spacing.get-var(lg) !default;

/// The default `column-gap` to apply to the `CardHeader`
/// @type Number
$header-spacing: spacing.get-var(md) !default;

/// The default padding to apply to the `CardContent`
/// @type Number
$content-padding: spacing.get-var(md) !default;

/// The default padding-bottom to apply to the `CardContent` when it is the last
/// child and the `$disable-content-last-child-padding` feature flag has
/// not been disabled.
///
/// @type Number
$content-padding-bottom: spacing.get-var(lg) !default;

/// The default padding to apply to the `CardFooter`
/// @type Number
$footer-padding: spacing.get-var(sm) !default;

/// The available configurable css variables and mostly used internally for the
/// `get-var`, `set-var`, and `use-var` utils.
/// @type List
$variables: (background-color, color);

/// @param {String} name - The supported variable name
/// @param {any} fallback [null] - An optional fallback value
/// @returns {String} a `var()` statement
@function get-var($name, $fallback: null) {
  $var: utils.get-var-name($variables, $name, "card");
  @if $fallback {
    @return var(#{$var}, #{$fallback});
  }

  @return var(#{$var});
}

/// @param {String} name - The supported variable name
/// @param {any} value - The value to set the variable to. Supports `null` which
/// will just be a no-op.
@mixin set-var($name, $value) {
  @if $value {
    #{utils.get-var-name($variables, $name, "card")}: #{$value};
  }
}

/// @param {String} property - The css property to apply the variable to
/// @param {String} name [$property] - The supported variable name
/// @param {any} fallback [null] - An optional fallback value if the variable
/// has not been set
@mixin use-var($property, $name: $property, $fallback: null) {
  #{$property}: get-var($name, $fallback);
}

/// Applies the light the variables based on feature flags
@mixin use-light-theme {
  @if not $disable-everything {
    @include set-var(background-color, $light-theme-background-color);
  }
}

/// Applies the dark the variables based on feature flags
@mixin use-dark-theme {
  @if not $disable-everything {
    @include set-var(background-color, $dark-theme-background-color);
  }
}

/// Conditionally applies the css variables based on feature flags
@mixin variables {
  @if not $disable-everything {
    @include set-var(background-color, $background-color);
    @if not theme.is-theme-color-var($color) {
      @include set-var(color, $color);
    }
  }
}

/// Generates all the styles based on feature flags.
///
/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
/// layer behavior
@mixin styles($disable-layer: false) {
  @if not $disable-everything {
    @include utils.optional-layer(card, $disable-layer) {
      @include theme.default-system-theme {
        @include use-dark-theme;
      }

      .rmd-card {
        @include use-var(background-color);
        @include use-var(
          color,
          $fallback: theme.theme-color-var-fallback($color)
        );

        border-radius: $border-radius;

        @if not $disable-raisable {
          &--raisable {
            @include box-shadows.elevation-transition(
              $raisable-start-elevation,
              $raisable-end-elevation,
              "&:hover"
            );
          }
        }

        @if not $disable-shadowed {
          &--shadowed {
            @include box-shadows.box-shadow($elevation);
          }
        }

        @if not $disable-bordered {
          &--bordered {
            border: $border-width inset $border-color;
          }
        }

        @if not $disable-clickable {
          &--clickable {
            @include interaction.surface;
          }
        }

        &__header {
          align-items: center;
          column-gap: $header-spacing;
          display: flex;
          max-width: 100%;
          padding: if(
            $header-padding == $header-padding-top or not $header-padding-top,
            $header-padding,
            $header-padding-top $header-padding $header-padding
          );
        }

        &__header-content {
          @include typography.text-overflow;

          flex: 1 1 auto;
          min-width: 0;
        }

        // does not require custom styles
        // &__title {
        // }

        // does not require custom styles
        // &__subtitle {
        // }

        &__content {
          flex: 1 1 auto;
          max-width: 100%;
          overflow: auto;

          @if $content-padding {
            &--padded {
              padding: $content-padding;
            }
          }

          @if not $disable-content-last-child-padding {
            &--padded-bottom:last-child {
              padding-bottom: $content-padding-bottom;
            }
          }
        }

        @if $footer-padding {
          &__footer {
            padding: $footer-padding;
          }
        }
      }
    }
  }
}
